<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.routerUrl">
        <span v-if="item.children&&item.children.length>0" class="no-redirect">
          {{ item.menuName }}
        </span>
        <a v-else @click.prevent="handleLink(item)">{{ item.menuName }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>

import pathToRegexp from 'path-to-regexp'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      levelList: null
    }
  },
  computed:{
    ...mapGetters([
      "routes"
    ]),
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      this.levelList=[];
      this.searchBread(this.routes,this.levelList);
      if(this.levelList&&this.levelList.length>0){
        localStorage.setItem("nowBreak",JSON.stringify(this.levelList));
      }else {
        let nowBreak=localStorage.getItem("nowBreak");
        if(nowBreak){
          JSON.parse(nowBreak).forEach(item=>{
            this.levelList.push(item);
          })
        }
      }
    },
    searchBread(route,mathed){
       if(!route)return;
       if(!mathed)mathed=[];
       route.forEach(item=>{
            if(item.children&&item.children.length>0){
              if(this.$route.path.indexOf(item.routerUrl+"/")>=0){
                mathed.push(item);
              }
               this.searchBread(item.children,mathed);
            }else {
              if(this.$route.path===item.routerUrl){
                mathed.push(item);
              }
            }
      })

    },
    handleLink(item) {
      const { menuUrl } = item
      this.$router.push(menuUrl)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../styles/transition";
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 12px;

    margin-left: 8px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
</style>
